<!DOCTYPE html>

<html lang="en">
  <meta charset="utf-8" />
  <title>ICERender-group-nested</title>
  <body>
    <div>
      <button id="btn-1">保存</button>
      <button id="btn-2">加载</button>
      <button id="btn-3">清除所有</button>
      <script src="../../dist/index.umd.js"></script>
    </div>
    <br/>
    <canvas id="canvas-1" width="1024" height="768" style="background-color: #f7f7f7;"></canvas>
  </body>
  <script type="text/javascript">
        let ice = new ICE.ICE().init('canvas-1');

        document.querySelector('#btn-1').addEventListener('click', (evt) => {
          const jsonStr = ice.toJSONString();
          window.localStorage.setItem('json-data', jsonStr);
        });
        document.querySelector('#btn-2').addEventListener('click', (evt) => {
          const jsonStr = window.localStorage.getItem('json-data');
          ice.fromJSONString(jsonStr);
        });
        document.querySelector('#btn-3').addEventListener('click', (evt) => {
          console.log('ice.clearAll()');
          ice.clearAll();
        });

        let group = new ICE.ICEGroup({
          left: 100,
          top: 100,
          width: 300,
          height: 200,
          style: {
            strokeStyle: '#fa0404',
            fillStyle: '#beffff',
            lineWidth: 1,
          },
        });

        let circle=new ICE.ICECircle({
          left: 20,
          top: 10,
          radius: 10,
          transform: {
            rotate: 45,
          },
        });

        let rect=new ICE.ICERect({
          left: 60,
          top: 10,
          width: 30,
          height: 20,
          transform: {
            rotate: 0,
          },
        });

        //先添加到group中
        group.addChild(circle);
        group.addChild(rect);

        //再添加到ice中
        ice.addChild(group);
  </script>
</html>
